<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .father {

            width: 400px;
            height: 350px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div id="app">
        <div @click.self="fn2" class="father">
            <!-- 默认有点击行为，阻止默认行为 -->
            <a @click.prevent="fn1" href="http://www.zllhyy.cn">点我跳转</a>
            <!-- 既想阻止默认行为又想阻止冒泡，就连着写，没有顺序之分，写上就有效果 -->
            <a @click.stop.prevent="fn1" href="http://www.zllhyy.cn">点我跳转</a>

            <button @click.once.stop="fn3">点我-只有一次有效哦！</button>

            <button @click="fn3">又来个事件</button>
        </div>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {

                fn1() {

                    alert('a被点了')
                },

                fn2 () {

                    alert('父盒子被点了')
                },

                fn3 () {

                    alert('按钮被点击')
                }
            }
        })
    </script>
</body>

</html>